<html>
<#include "header.ftl">
<div class="contant">
    <div class="wrapper row">
        <div class="col-md-1"></div>
        <div class="col-md-10 row">
            <div class="col-md-9 leftSection">
                <ul class="articles">
                <#--#foreach($vo in $vos)-->
                <#list vos as vo>
                    <li class="blogAticle">
                        <div class="articleHeader">
                            <p><a href="/article/${vo.article.id}">${vo.article.title}</a></p>
                        </div>
                        <div class="articleContent">
                            <p>${vo.article.describes}</p>
                        </div>
                        <div class="articleFooter">
                            <ul>
                                <li><i class="fa fa-calendar fa-1x" aria-hidden="true"></i><span>${vo.article.createdDate?string("yyyy-MM-dd HH:mm:ss")}</span></li>
                                <li><i class="fa fa-eye" aria-hidden="true"></i><span>${vo.clickCount}</span></li>
                                <li><i class="fa fa-list fa-1x" aria-hidden="true"></i><span>${vo.article.category}</span></li>
                                <li><i class="fa fa-tags fa-1x" aria-hidden="true"></i>
                                    <#list vo.tags as tag>
                                        <span>${tag.name}</span>
                                    </#list>
                                </li>
                                <li class="readMore"><a href="/article/${vo.article.id}">read more</a></li>
                            </ul>
                        </div>
                    </li>
                </#list>
                <#--#end-->
                </ul>
                <div class="paginationWapper">
                    <ul class="pagination">
                    <#if pagination.current gt 1>
                        <li>
                            <a href="/person/tag/${tagId}?pageId=${pagination.prePage}">&laquo;</a>
                        </li>
                    <#else>
                        <li class="disabled">
                            <a href="">&laquo;</a>
                        </li>
                    </#if>
                        <li><a href="">${pagination.current}/${pagination.lastPage}</a></li>
                    <#if pagination.current lt pagination.lastPage>
                        <li>
                            <a href="/person/tag/${tagId}?pageId=${pagination.nextPage}">&raquo;</a>
                        </li>
                    <#else>
                        <li class="disabled">
                            <a href="">&raquo;</a>
                        </li>
                    </#if>
                    </ul>
                </div>
            </div>
            <div class="col-md-3 rightSection">
                <div class="side categories">
                <div class="header"><i class="fa fa-list-ul" aria-hidden="true"></i><span>Categories</span></div>
                <ul>
                    <li><a href="/person/category/Java?pageId=1&userId=${user.id}">Java</a><span>${categoryCount.Java!"0"}</span></li>
                    <li><a href="/person/category/Web?pageId=1&userId=${user.id}">Web</a><span>${categoryCount.Web!"0"}</span></li>
                    <li><a href="/person/category/Linux?pageId=1&userId=${user.id}">Linux</a><span>${categoryCount.Linux!"0"}</span></li>
                    <li><a href="/person/category/分布式系统?pageId=1&userId=${user.id}">分布式系统</a><span>${categoryCount.Distributed!"0"}</span></li>
                    <li><a href="/person/category/数据库?pageId=1&userId=${user.id}">数据库</a><span>${categoryCount.Database!"0"}</span></li>
                    <li><a href="/person/category/算法?pageId=1&userId=${user.id}">算法</a><span>${categoryCount.Algorithm!"0"}</span></li>
                    <li><a href="/person/category/随笔?pageId=1&userId=${user.id}">随笔</a><span>${categoryCount.Text!"0"}</span></li>
                    <li><a href="/person/category/其它?pageId=1&userId=${user.id}">其它</a><span>${categoryCount.Other!"0"}</span></li>
                </ul>
            </div>
                <div class="side tags">
                    <div class="header"><i class="fa fa-tags" aria-hidden="true"></i><span>Tags</span></div>
                    <div id="tagCloud">
                    <#list tags as tag>
                    <#--#foreach($tag in $tags)-->
                        <a href="/person/tag/${tag.id}?pageId=1&userId=${user.id}">${tag.name}</a>
                    <#--#end-->
                    </#list>
                    </div>
                </div>
                </div>
                <div class="side hotArticles">
                    <div class="header"><i class="fa fa-file-text" aria-hidden="true"></i><span>HotArticles</span></div>
                    <ul>
                    <#if hotArticles??>
                        <#list hotArticles as hotArticle>
                        <#--#foreach($hotArticle in $hotArticles)-->
                        <#--#set($str=$!hotArticle.title)-->
                        <#--#if($str.length()>19)-->
                        <#--#set($str=$str.substring(0,19))-->
                            <#assign strall = hotArticle.title>
                            <#if strall?length gt 19>
                                <#assign str=strall?substring(0,19)>
                                <li><a href="/article/${hotArticle.id}">${str!""}...</a></li>
                            <#else>
                            <#--#else-->
                                <li><a href="/article/${hotArticle.id}">${strall}</a></li>
                            <#--#end-->
                            <#--#end-->
                            </#if>
                        </#list>
                    </#if>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<#include "footer.ftl">
</html>